<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover"/>

    <meta http-equiv="content-security-policy" content="upgrade-insecure-requests">
    <meta content="yes" name="apple-mobile-web-app-capable"/>

    <meta content="yes" name="apple-touch-fullscreen"/>

    <meta content="telephone=no,email=no" name="format-detection"/>
    <script src="https://oss.chathot.me/action/js/loading.js?v=0.234"></script>
    <script src="https://oss.chathot.me/action/js/vue.min.js"></script>
    <script src="https://oss.chathot.me/action/mobile_js/mobile_until.js?v=3435635"></script>
    <link rel='stylesheet' href="https://oss.chathot.me/action/mobile_js/var.css?v=.12121">
    <script src="js/lan.js?v=154"></script>
    <link rel="stylesheet" href="./css/page.css?v=133">
    <script src="https://oss.chathot.me/action/vue_component/mark_box/mark_box.js?v=0.212"></script>


</head>
<body>
<div id="page">
    <div class="top">
        <img :src="lan.top" alt="">
    </div>
    <div class="mt_4">
        <div class="content">
            {{lan.a1}}
        </div>
        <div class="content mt68 padding_none">
            <div class="title">{{lan.a2}}</div>

            <div class="avction">
                <div v-for="(item,index) in roomlist" @click="setTxt(item)">
                    <img :src="item.avatar" alt="">
                    <p>{{item.tit}}</p>
                </div>
            </div>
            <div class="atxt">
                {{lan.a9}}
            </div>

        </div>

        <div class="content mt68 padding_none">
            <div class="title">{{lan.a10}}</div>
            <div class="atxt">
                {{lan.a10_2}}
            </div>
            <div class="atxt">
                {{lan.a11}}
            </div>
            <div
                v-if="currentLan === 'id'"
                class="table_box m-1">
                <img src="https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-img2.png" alt="">
            </div>            
            <div class="table_box m-1">
                <img src="https://oss.chathot.me/action/2021/08/13/p1.png" alt="">
            </div>
            <div class="table_box ">
                <table border="1" cellspacing="0">
                    <tr>
                        <th>{{lan.a12_1}}</th>
                        <th v-if="currentLan !== 'id'">{{lan.a20}}</th>
                        <th>{{lan.a21}}</th>
                        <th>{{lan.a13}}</th>
                    </tr>
                    <tr v-for="(item,index) in list">
                        <td v-for="ite in item" v-if="!Array.isArray(ite)">{{ite}}</td>
                        <td v-for="ite in item" v-if="Array.isArray(ite)">
                            <div class="gift">
                                <div v-for="(ie,inx) in ite">
                                    <img :src="ie.type==1?'https://oss.chathot.me/action/2021/08/13/p3.png': ie.type== 2 ? 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/broadcast-card.png?v=2' :'https://oss.chathot.me/action/2021/08/13/p4.png'"
                                         alt="">
                                    <!-- <p> {{inx==0?lan.a34:''}}</p> -->
                                    <p>
                                        <span v-if="ie.type!=1">{{ie.value}}</span>
                                        <span v-html="ie.type==1 ? lan.a34.replace('lzTemplate', ie.value) : ''"></span>
                                    </p>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>

            </div>
            <div class="atxt m-3">
                {{lan.a14}}
            </div>
        </div>

        <div class="content mt68 padding_none">
            <div class="title">{{lan.a15}}</div>

            <div class="table_box">
                <img src="https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-img1.png" alt="">
            </div>
            <div class="atxt m-3">
                <p>{{lan.a16}}</p>
                <p class="mt3">{{lan.a17}}</p>
                <p class="mt3">{{lan.a18}}</p>
            </div>

        </div>


        <div class="content mt68">
            <div class="title">{{lan.a23}}</div>

            <div>
                <span class="icon">{{lan.a24}}</span>
                {{lan.a24_1}}
            </div>

            <div class="mt3">
                <span class="icon">{{lan.a25}}</span>
                {{lan.a25_1}}
            </div>
        </div>


        <div class="content mt2 icon_box">
            <!-- <div>
                <div class="room" @click="roomDetails">
                    <img src="https://oss.chathot.me/action/2021/07/20/img1.png" alt="">
                </div>
                <div class="text_center m1">RoomID:10016</div>
            </div> -->

            <div class="user mt3">
                <div v-for="item in user_list">
                    <!-- <div class="user_img" @click="go_user(item.id)"> -->
                    <div class="user_img" @click="roomDetails(item.id, item.idText)">
                        <img :src="item.img" alt="">
                    </div>
                    <p class="m1 t_">{{item.no}}</p>
                    <p>{{item.t}}</p>
                </div>
            </div>

            <div class="mt4">
                <p>{{lan.a26}}</p>
                <p>{{lan.a26_1}}</p>
                <p>{{lan.a26_2}}</p>
                <p>{{lan.a26_3}}</p>
                <!-- <p class="color_00ffcc mt4">{{lan.a33}}</p> -->
            </div>


        </div>


    </div>
    <div class="footer">
        {{ lan.k24 }}
    </div>

    <!--提示弹出-->
    <markbox v-if="isRule">
        <div class="mark_box" slot="markMsg" @click="isRule=false">
            <div class="roomMsg">
                <div class="r_img">
                    <img
                        style="border-radius: 0.2rem" 
                        :src="showMsg.b" alt="">
                </div>
                <div class="mt3">
                    <div class="r_T">
                        {{showMsg.tit}}
                    </div>
                    <div class="r_txt mt2">
                        <p v-for="ite in showMsg.x">{{ite}}</p>
                        <p>{{showMsg.t}}</p>
                        <p>{{showMsg.r}}</p>

                    </div>
                </div>

                <div class="goRoom">
                    <div></div>
                    <div class="sr">
                        <img src="https://oss.chathot.me/action/2021/08/13/t5.png" alt="">
                    </div>

                </div>
                <div @click="istop=isRule" class="colse">

                </div>

            </div>

        </div>
    </markbox>

</div>

<script>
    if (GetUrlParam('language') == 'ar') {
       document.getElementsByTagName('body')[0].className = 'ar_text'

    }
    new Vue({
        el: '#page',
        data: function () {
            return {
                isRule: false,
                lan: {},
                list: [],
                user_list: [
                    {
                        img: 'https://oss.chathot.me/action/2021/07/20/img1.png',
                        no: '10080',
                        id: '100001',
                        t: 'admin_80'
                    },
                    {
                        img: 'https://oss.chathot.me/action/2021/07/20/img2.png',
                        no: '10016',
                        id: '100127 ',
                        t: ' Aimee'
                    },
                    {
                        img: 'https://oss.chathot.me/action/2021/07/20/img1.png',
                        no: '10086',
                        id: '100011',
                        t: ' admin_86'
                    },
                ],
                roomlist: [],
                showMsg: {},
                currentLan: 'hi', // tr id hi
            }
        },
        created: function () {
            var lan = this.lan = judge_lan(this.currentLan, language);
            document.title = lan.a0;
            // type 1 礼物 2 广播卡 3 置顶卡
            if (this.currentLan === 'tr') {
                this.user_list = [
                    {
                        img: 'https://oss.chathot.me/action/2021/07/20/img1.png',
                        no: '10020',
                        id: '451892',
                        idText: 'chinese451892',
                        t: '',
                    },
                    {
                        img: 'https://oss.chathot.me/action/2021/07/20/img1.png',
                        no: '10022',
                        id: '47826',
                        idText: 'chinese47826',
                        t: '',
                    },                    
                ];
                this.list = [
                    [100, 15, 50000, [{
                        type: 1,
                        value: 4000,
                    }, {
                        type: 2,
                        value: '*2',
                    }]],
                    [200, 20, 100000, [{
                        type: 1,
                        value: 8000,
                    }, {
                        type: 2,
                        value: '*4',
                    }]],
                    [400, 20, 200000, [{
                        type: 1,
                        value: 16000,
                    }, {
                        type: 2,
                        value: '*6',
                    }]],
                    [600, 30, 300000, [{
                        type: 1,
                        value: 24000,
                    }, {
                        type: 2,
                        value: '*2',
                    }, {
                        type: 3,
                        value: '*1',
                    }]],
                    [800, 40, 400000, [{
                        type: 1,
                        value: 32000,
                    }, {
                        type: 2,
                        value: '*4',
                    }, {
                        type: 3,
                        value: '*1',
                    }]],
                    [1000, 50, 500000, [{
                        type: 1,
                        value: 40000,
                    }, {
                        type: 2,
                        value: '*6',
                    }, {
                        type: 3,
                        value: '*1',
                    }]],
                ]
            } else if (this.currentLan === 'id') {
                this.user_list = [
                    {
                        img: 'https://oss.chathot.me/action/2021/07/20/img1.png',
                        no: '10051',
                        id: '13164',
                        idText: 'chinese13164',
                        t: '',
                    },
                ];                
                this.list = [
                    [100, 20000, [{
                        type: 1,
                        value: 600,
                    }, {
                        type: 2,
                        value: '*1',
                    }]],
                    [100, 35000, [{
                        type: 1,
                        value: 1050,
                    }, {
                        type: 2,
                        value: '*2',
                    }]],
                    [100, 50000, [{
                        type: 1,
                        value: 1500,
                    }, {
                        type: 2,
                        value: '*3',
                    }]],
                    [100, 100000, [{
                        type: 1,
                        value: 3000,
                    }, {
                        type: 2,
                        value: '*3',
                    }]],
                    [200, 200000, [{
                        type: 1,
                        value: 6000,
                    }, {
                        type: 3,
                        value: '*1',
                    }]],
                    [400, 300000, [{
                        type: 1,
                        value: 9000,
                    }, {
                        type: 3,
                        value: '*1',
                    }]],
                    [400, 400000, [{
                        type: 1,
                        value: 12000,
                    }, {
                        type: 3,
                        value: '*1',
                    }]],
                    [600, 500000, [{
                        type: 1,
                        value: 15000,
                    }, {
                        type: 3,
                        value: '*1',
                    }]],
                    [600, 600000, [{
                        type: 1,
                        value: 18000,
                    }, {
                        type: 3,
                        value: '*1',
                    }]],
                    [800, 800000, [{
                        type: 1,
                        value: 24000,
                    }, {
                        type: 3,
                        value: '*1',
                    }]],
                ]
            } else if (this.currentLan === 'hi') {
                this.user_list = [
                    {
                        img: 'https://oss.chathot.me/action/2021/07/20/img1.png',
                        no: '10072',
                        id: '644254',
                        idText: 'chinese644254',
                        t: '',
                    },
                ];                   
                this.list = [
                    [100, 15, 50000, [{
                        type: 1,
                        value: 4000,
                    }, {
                        type: 3,
                        value: '*2',
                    }]],
                    [200, 20, 100000, [{
                        type: 1,
                        value: 8000,
                    }, {
                        type: 3,
                        value: '*4',
                    }]],
                    [400, 20, 200000, [{
                        type: 1,
                        value: 16000,
                    }, {
                        type: 3,
                        value: '*6',
                    }]],
                    [600, 30, 300000, [{
                        type: 1,
                        value: 24000,
                    }, {
                        type: 2,
                        value: '*2',
                    }, {
                        type: 3,
                        value: '*1',
                    }]],
                    [800, 40, 400000, [{
                        type: 1,
                        value: 32000,
                    }, {
                        type: 2,
                        value: '*4',
                    }, {
                        type: 3,
                        value: '*1',
                    }]],
                    [1000, 50, 500000, [{
                        type: 1,
                        value: 40000,
                    }, {
                        type: 2,
                        value: '*6',
                    }, {
                        type: 3,
                        value: '*1',
                    }]],
                ]
            }
            this.roomlist = [
                {
                    avatar: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path1-s-' + this.currentLan + '.png?v=4',
                    b: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path1-b-' + this.currentLan + '.png',
                    tit: lan.k0,
                    // x: [lan.k6,lan.k6_1,lan.k6_2,lan.k6_3,lan.k6_4,lan.k6_5,lan.k6_6],
                    x: [lan.k6],
                    t: lan.k12,
                    r: lan.k18,
                },
                {
                    avatar: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path2-s-' + this.currentLan + '.png?v=4',
                    b: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path2-b-' + this.currentLan + '.png',

                    tit: lan.k1,
                    x: [lan.k7],
                    t: lan.k13,
                    r: lan.k19,
                },
                {
                    avatar: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path3-s-' + this.currentLan + '.png',
                    b: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path3-b-' + this.currentLan + '.png',

                    tit: lan.k2,
                    x: [lan.k8],
                    t: lan.k14,
                    r: lan.k20,
                },
                {
                    avatar: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path4-s-' + this.currentLan + '.png',
                    b: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path4-b-' + this.currentLan + '.png',

                    tit: lan.k3,
                    x:[ lan.k9],
                    t: lan.k15,
                    r: lan.k21,
                },
                {
                    avatar: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path5-s-' + this.currentLan + '.png',
                    b: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path5-b-' + this.currentLan + '.png',

                    tit: lan.k4,
                    x: [lan.k10],
                    t: lan.k16,
                    r: lan.k22,
                },
                {
                    avatar: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path6-s-' + this.currentLan + '.png?v=2',
                    b: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path6-b-' + this.currentLan + '.png?v=2',

                    tit: lan.k5,
                    x: [lan.k11],
                    t: lan.k17,
                    r: lan.k23,
                },
            ]
            // 图片预加载
            for(var imgIndex = 0; imgIndex < this.roomlist.length; imgIndex++) {
                var imgItem = this.roomlist[imgIndex];
                var oImage = new Image();
                oImage.src = imgItem.b;
            }
        },
        methods: {
            setTxt(msg) {
                this.showMsg = msg;
                this.isRule = true
            },
            // 跳转个人主页
            go_user(id) {
                userDetails(id);

            },
            // 房间跳转
            roomDetails(id, idText) {
                // roomDetails('451334', '', 'chinese451334')
                console.log(id, '', idText);
                roomDetails(id, '', idText)

            },
        },
        mounted: function () {
            var height = document.documentElement.clientHeight || document.body.clientHeight;
            var page = document.querySelector('#page');
            page.style.minHeight = height + 'px';
        }

    })

</script>
</body>
</html>
